<template>
  <div class="background">
    <p style="text-align: center; font-size: 20px; color: #a17c74">食谱分类</p>
    <br />
    <!-- <div> -->
    <table class="second">
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td class="gaga">&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
        <hr class="style" />
      </tr>
      <tr>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;家常菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span>
        </router-link>
        <router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span> </router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/">
          <span class="bgpp">
            <td>&nbsp;&nbsp;&nbsp;蔬菜&nbsp;</td>
            <td>&nbsp;1314&nbsp;</td>
          </span></router-link
        ><router-link to="/" class="gaga">
          <span class="bgpp">
            <td>&nbsp;香脆激流</td>
            <td class="bgpg">&nbsp;1314&nbsp;</td>
          </span></router-link
        >
      </tr>
    </table>
    <div class="port">
      <div class="ppgg">
        <div><router-link to="/one/sp" class="aagd">上一页</router-link></div>
        <span><router-link to="/one/sp" class="aadc">1</router-link></span>
        <span><router-link to="/two/sp" class="aadd">2</router-link></span>
        <div><router-link to="/two/sp" class="aagg">下一页</router-link></div>
      </div>
    </div>
    <!-- <shipu-fenlei /> -->
  </div>
  <!-- <hr class="style-one" /> -->
</template>

<script>
// import ShipuFenlei from '@/components/ShipuFenlei.vue';
export default {
  components: {},
};
</script>

<style scoped>
a {
  text-decoration: none;
}
router-link {
  text-decoration: none;
}
.background {
  background-color: #fbfbfb;
}
.second {
  border: 1px solid #e8e7e5;
  padding: 8px;
  background-color: white;
  margin: auto;
}
.bgpp > td {
  padding: 8px 15px;
  color: black;
  /* border: 1px solid red; */
}
.bgpp > td:last-child {
  border: 1px solid #e8e7e5;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  color: #c2c1bf;
}
.bgpg {
  border: 1px solid red;
}
.style {
  border: 1px solid #e8e7e5;
}
.bgpp > td:hover {
  color: #fa7e3e;
}
</style>

<style scoped>
.port {
  height: 1000px;
  width: 850px;
  margin: auto;
}
.ppgg {
  display: flex;
  height: 50px;
  width: 280px;
  margin: 20px 0 0 0;
}
.aadc {
  text-decoration: none;
  padding: 5px 10px;
  margin: 0 10px 0 20px;
  border: 1px solid #fa7e3e;
  color: #fa7e3e;
}
.aadc:hover {
  color: white;
  background-color: #fa7e3e;
  border: 1px solid #fa7e3e;
}
.aadd {
  text-decoration: none;
  padding: 5px 10px;
  margin: 0 20px 0 10px;
  border: 1px solid #eae6e3;
}
.aadd:hover {
  color: white;
  background-color: #fa7e3e;
  border: 1px solid #fa7e3e;
}
.aagd {
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #eae6e3;
  /* background-color: orange; */
}
.aagd:hover {
  color: white;
  background-color: #fa7e3e;
  border: 1px solid #fa7e3e;
}
.aagg {
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #fa7e3e;
  color: white;
  background-color: #fa7e3e;
}
</style>
